<template>
  <div class="w-full h-full mt-4">
    <div class="h-full order-bar-line-page">
      <div class="chart-wrap h-full w-full" :class="`${chatClassName}`"></div>
    </div>
    <top-panel class="app-cotainer__top-panel">
      <div class="p-3">
        <div class="mb-2">
          <div>visible: {{ visibleNumbers.length }}</div>
          <div>{{ visibleNumbers }}</div>
        </div>

        <div>
          <div>hidden: {{ hiddenNumbers.length }}</div>
          <div>{{ hiddenNumbers }}</div>
        </div>
      </div>
    </top-panel>
  </div>
</template>
<script>
import _ from 'lodash'
import ChartWatcherMixin from '@/mixins/ChartWatcherMixin.js'
import TopPanel from '@/components/TopPanel/index.vue'
import { formatterForGroupOrderBarLine } from '@/utils/study.js'

export default {
  name: 'OrderBarLine',
  components: {
    TopPanel
  },
  mixins: [ChartWatcherMixin],
  props: {
    groups: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showRightMiniPanel: false,
      chartOption: {
        backgroundColor: '#344b58',

        // tooltip: {
        // 	trigger: 'axis',
        // 	axisPointer: {
        // 		textStyle: {
        // 			color: '#fff'
        // 		}
        // 	}
        // },

        grid: {
          borderWidth: 0,
          // left: '5%',
          // right: '5%',
          // top: 50,
          // bottom: 95,

          left: 0,
          right: 0,
          top: 50,
          bottom: 95,

          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          x: '5%',
          top: 10,
          textStyle: {
            color: '#90979c'
          },
          // data: ['female', 'male', 'average']
          data: ['bar', 'line']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#90979c'
              }
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#90979c' // 设置 y 轴线的颜色
              }
            },
            axisTick: {
              show: true // 显示 y 轴刻度
            },
            splitLine: {
              show: false // 隐藏 y 轴分割线
            }
          }
        ],
        tooltip: {
          trigger: 'axis', // 轴触发
          formatter: (params) =>
            formatterForGroupOrderBarLine.call(this, params)
        },

        dataZoom: [
          {
            startValue: 1,
            endValue: 49,
            bottom: 10,
            right: 5,
            left: 5
          }
        ],

        series: [
          // {
          // 	name: 'female',
          // 	type: 'bar',
          // 	stack: 'total',
          // 	barMaxWidth: 35,
          // 	barGap: '10%',
          // 	itemStyle: {
          // 		normal: {
          // 			color: 'rgba(255,144,128,1)',
          // 			label: {
          // 				show: true,
          // 				textStyle: {
          // 					color: '#fff'
          // 				},
          // 				position: 'insideTop',
          // 				formatter(p) {
          // 					return p.value > 0 ? p.value : ''
          // 				}
          // 			}
          // 		}
          // 	},
          // 	data: [
          // 		709,
          // 		1917,
          // 		2455,
          // 		2610,
          // 		1719,
          // 		1433,
          // 		1544,
          // 		3285,
          // 		5208,
          // 		3372,
          // 		2484,
          // 		4078
          // 	]
          // },

          {
            name: 'bar',
            type: 'bar',
            // 可以控制折线是否在柱状图之上 还是 重叠
            stack: 'total',
            itemStyle: {
              normal: {
                color: 'rgba(0,191,183,1)',
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: 'top',
                  formatter(p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: []
          },

          {
            name: 'line',
            type: 'line',
            // 可以控制折线是否在柱状图之上 还是 重叠
            stack: 'total',
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: 'rgba(252,230,48,1)',
                barBorderRadius: 0
                // label: {
                // 	show: true,
                // 	position: 'top',
                // 	formatter(p) {
                // 		return p.value > 0 ? p.value : ''
                // 	}
                // }
              }
            },
            data: []
          }
        ],
        visualMap: {
          itemHeight: 800,
          min: 0,
          max: 0,
          left: 300,
          top: 'top',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          orient: 'horizontal', // 设置为横向布局
          textStyle: {
            color: '#FFFFFF' // 设置文字为白色
          },

          precision: 3, // 设置小数精度为2位
          splitNumber: 100, // 设置分段数为5（可根据需要调整）

          inRange: {
            color: ['rgba(0,191,183,1)', 'rgba(252,230,48,1)'] // 手动设置渐变颜色
          }
        }
      },
      visibleNumbers: [],
      hiddenNumbers: []
    }
  },
  methods: {
    bindAllEChartEvents() {
      // 监听 visualMap 选择变化事件
      // this.myChart.on("datarangeselected", (params) => {
      //   const selectedRange = params.selected; // 获取当前 visualMap 的选择范围
      //   const min = selectedRange[0]; // 获取范围的最小值
      //   const max = selectedRange[1]; // 获取范围的最大值
      //   // 获取当前图表数据
      //   const seriesData = this.myChart.getOption().series[0].data;
      //   // 筛选出显示的数据和不显示的数据
      //   const visibleData = seriesData.filter(
      //     (item) => item.value >= min && item.value <= max
      //   );
      //   const hiddenData = seriesData.filter(
      //     (item) => item.value < min || item.value > max
      //   );
      //   const visibleNumbers = visibleData.map((e) => e.sourceData[0].number);
      //   const hiddenNumbers = hiddenData.map((e) => e.sourceData[0].number);
      //   // console.group('当前显示的数据:')
      //   // console.log("当前显示的数据:", visibleNumbers);
      //   // console.log("当前隐藏的数据:", hiddenNumbers);
      //   // console.groupEnd()
      //   this.visibleNumbers = visibleNumbers;
      //   this.hiddenNumbers = hiddenNumbers;
      // });
    },
    resetAllStatus() {
      this.visibleNumbers = []
      this.hiddenNumbers = []
    },
    updateChart() {
      this.resetAllStatus()
      if (this.myChart) {
        this.myChart.dispose()
        this.myChart = null

        const myChart = this.$echarts.init(
          document.querySelector(`.${this.chatClassName}`)
        )
        this.myChart = myChart

        if (
          this.bindAllEChartEvents &&
          typeof this.bindAllEChartEvents === 'function'
        ) {
          this.bindAllEChartEvents()
        }

        const countsArray = this.groups
          .map((group, index) => {
            const count = this.allValues.filter((item) =>
              group.includes(Number(item.number))
            ).length

            return {
              name: `${index}`, // 分组名称
              value: count, // 出现次数
              groupNumber: group,
              groups: this.groups
            }
          })
          .sort((a, b) => a.value - b.value)

        this.chartOption.xAxis[0].data = countsArray.map((e) => e.name)

        this.chartOption.series[0].data = countsArray
        this.chartOption.series[1].data = countsArray

        const { value: maxCount } = _.maxBy(countsArray, 'value')

        this.chartOption.visualMap.max = maxCount

        // // 绘制图表
        this.myChart.setOption(this.chartOption)
      }
    }
  }
}
</script>
